<template>
  <div class="page-content">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center">
        <router-link to="/tools" class="mr-2">
          <i class="fas fa-arrow-left text-gray-600"></i>
        </router-link>
        <h1 class="text-lg font-semibold">管辖权分析</h1>
      </div>
    </header>

    <main class="container mx-auto px-4 mt-4">
      <div class="bg-white rounded-xl shadow-md p-6">
        <h2 class="text-lg font-semibold mb-4">管辖权分析工具</h2>
        <p class="text-sm text-gray-500 mb-6">
          输入案件信息，分析确定管辖法院
        </p>

        <!-- 案件信息输入 -->
        <div class="space-y-4 mb-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              原告住所地
            </label>
            <input
              v-model="plaintiffAddress"
              type="text"
              placeholder="请输入原告住所地"
              class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none"
            />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              被告住所地
            </label>
            <input
              v-model="defendantAddress"
              type="text"
              placeholder="请输入被告住所地"
              class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none"
            />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              合同履行地（如有）
            </label>
            <input
              v-model="contractAddress"
              type="text"
              placeholder="请输入合同履行地"
              class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none"
            />
          </div>
        </div>

        <!-- 分析按钮 -->
        <button
          @click="analyzeJurisdiction"
          class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-medium"
          :disabled="!canAnalyze"
        >
          <i class="fas fa-search mr-2"></i>
          分析管辖权
        </button>

        <!-- 分析结果 -->
        <div v-if="analysisResult" class="mt-6">
          <h3 class="text-md font-semibold mb-3">管辖权分析结果</h3>
          <div class="bg-gray-50 rounded-lg p-4 space-y-3">
            <div>
              <span class="text-sm font-medium text-gray-700">管辖法院：</span>
              <span class="text-blue-600 font-medium">{{ analysisResult.court }}</span>
            </div>
            <div>
              <span class="text-sm font-medium text-gray-700">管辖依据：</span>
              <span class="text-gray-600">{{ analysisResult.basis }}</span>
            </div>
            <div>
              <span class="text-sm font-medium text-gray-700">法律条文：</span>
              <span class="text-gray-600">{{ analysisResult.law }}</span>
            </div>
            <div>
              <span class="text-sm font-medium text-gray-700">注意事项：</span>
              <p class="text-gray-600 text-sm mt-1">{{ analysisResult.notes }}</p>
            </div>
          </div>
        </div>

        <!-- 政策说明 -->
        <div class="mt-8 bg-blue-50 rounded-lg p-6">
          <h3 class="text-lg font-semibold text-blue-900 mb-4 flex items-center">
            <i class="fas fa-info-circle mr-2"></i>
            管辖权政策说明
          </h3>
          
          <div class="space-y-4 text-sm text-blue-800">
            <!-- 一、概念 -->
            <div class="bg-white rounded-lg p-4">
              <h4 class="font-medium text-blue-900 mb-2">一、概念</h4>
              <p class="leading-relaxed">
                管辖权是指人民法院依法受理和审理案件的权限与范围。管辖的确定直接影响案件是否能够被正确受理和审理，是诉讼程序的基础环节。
              </p>
            </div>

            <!-- 二、管辖的类型 -->
            <div class="bg-white rounded-lg p-4">
              <h4 class="font-medium text-blue-900 mb-3">二、管辖的类型</h4>
              
              <div class="space-y-4">
                <div>
                  <h5 class="font-medium text-blue-800 mb-2 flex items-center">
                    <i class="fas fa-dot-circle text-blue-600 mr-2 text-xs"></i>
                    级别管辖
                  </h5>
                  <p class="text-gray-700 mb-2 ml-4">指不同级别的法院受理案件的分工。</p>
                  <p class="text-gray-600 text-xs ml-4">
                    <strong>例：</strong>基层法院一般审理第一审民事案件；中级法院审理重大、复杂案件或涉外案件；高级法院、最高法院根据法律规定行使一审或二审权。
                  </p>
                </div>

                <div>
                  <h5 class="font-medium text-blue-800 mb-2 flex items-center">
                    <i class="fas fa-dot-circle text-blue-600 mr-2 text-xs"></i>
                    地域管辖
                  </h5>
                  <p class="text-gray-700 mb-2 ml-4">按案件发生地、当事人住所地等确定具体哪一法院有权管辖。</p>
                  <div class="ml-4 space-y-1 text-xs text-gray-600">
                    <p><strong>一般规则：</strong>被告住所地法院管辖。</p>
                    <p><strong>特殊规则：</strong>合同纠纷可选择合同履行地法院，侵权纠纷可选择侵权行为地或结果发生地法院。</p>
                  </div>
                </div>

                <div>
                  <h5 class="font-medium text-blue-800 mb-2 flex items-center">
                    <i class="fas fa-dot-circle text-blue-600 mr-2 text-xs"></i>
                    专属管辖
                  </h5>
                  <p class="text-gray-700 mb-2 ml-4">法律明确规定由特定法院管辖，其他法院无权受理。</p>
                  <p class="text-gray-600 text-xs ml-4">
                    <strong>例：</strong>不动产纠纷由不动产所在地法院管辖；港口作业争议由港口所在地法院管辖。
                  </p>
                </div>

                <div>
                  <h5 class="font-medium text-blue-800 mb-2 flex items-center">
                    <i class="fas fa-dot-circle text-blue-600 mr-2 text-xs"></i>
                    协议管辖
                  </h5>
                  <p class="text-gray-700 ml-4">当事人可以通过书面协议选择争议解决法院，但不得违反级别管辖和专属管辖的规定。</p>
                </div>

                <div>
                  <h5 class="font-medium text-blue-800 mb-2 flex items-center">
                    <i class="fas fa-dot-circle text-blue-600 mr-2 text-xs"></i>
                    移送管辖 / 指定管辖
                  </h5>
                  <div class="ml-4 space-y-1 text-gray-700">
                    <p>如果法院发现自己无权管辖，应将案件移送有管辖权的法院。</p>
                    <p>上级法院可在必要时指定管辖。</p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 三、适用原则 -->
            <div class="bg-white rounded-lg p-4">
              <h4 class="font-medium text-blue-900 mb-3">三、适用原则</h4>
              <ul class="space-y-2">
                <li class="flex items-start">
                  <i class="fas fa-check-circle text-green-600 mt-1 mr-2 text-xs"></i>
                  <div>
                    <strong class="text-gray-800">依法确定优先：</strong>
                    <span class="text-gray-700">法院必须严格依照《民事诉讼法》《行政诉讼法》等法律确定管辖权。</span>
                  </div>
                </li>
                <li class="flex items-start">
                  <i class="fas fa-check-circle text-green-600 mt-1 mr-2 text-xs"></i>
                  <div>
                    <strong class="text-gray-800">尊重当事人合法选择：</strong>
                    <span class="text-gray-700">协议管辖在合法范围内有效。</span>
                  </div>
                </li>
                <li class="flex items-start">
                  <i class="fas fa-check-circle text-green-600 mt-1 mr-2 text-xs"></i>
                  <div>
                    <strong class="text-gray-800">效率与公正并重：</strong>
                    <span class="text-gray-700">防止"选择性起诉""法院竞合"，保障审理公平和效率。</span>
                  </div>
                </li>
              </ul>
            </div>

            <!-- 四、相关法律依据 -->
            <div class="bg-white rounded-lg p-4">
              <h4 class="font-medium text-blue-900 mb-2">四、相关法律依据</h4>
              <div class="text-xs space-y-1 text-gray-600">
                <p>• 《中华人民共和国民事诉讼法》（2017 修正）第 21-38 条</p>
                <p>• 《中华人民共和国行政诉讼法》（2021 修正）第 16-24 条</p>
                <p>• 《最高人民法院关于适用<中华人民共和国民事诉讼法>的解释》</p>
              </div>
            </div>

            <!-- 五、风险提示 -->
            <div class="bg-white rounded-lg p-4">
              <h4 class="font-medium text-blue-900 mb-3">五、风险提示</h4>
              <div class="bg-red-50 border-l-4 border-red-400 p-3 rounded mb-3">
                <div class="space-y-2 text-red-800 text-xs">
                  <p class="flex items-start">
                    <i class="fas fa-exclamation-triangle mr-2 mt-0.5"></i>
                    如果当事人向<strong>无管辖权法院</strong>起诉，案件将被移送或裁定驳回起诉，导致诉讼延误。
                  </p>
                  <p class="flex items-start">
                    <i class="fas fa-exclamation-triangle mr-2 mt-0.5"></i>
                    涉及<strong>专属管辖案件</strong>，协议管辖条款无效。
                  </p>
                  <p class="flex items-start">
                    <i class="fas fa-lightbulb mr-2 mt-0.5"></i>
                    选择法院时，应综合考虑案件类型、争议标的所在地、对方住所地及可能的审理效率。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'JurisdictionAnalysis',
  setup() {
    const plaintiffAddress = ref('')
    const defendantAddress = ref('')
    const contractAddress = ref('')
    const analysisResult = ref(null)

    const canAnalyze = computed(() => {
      return plaintiffAddress.value && defendantAddress.value
    })

    const analyzeJurisdiction = () => {
      // 模拟分析结果
      analysisResult.value = {
        court: '北京市朝阳区人民法院',
        basis: '被告住所地管辖',
        law: '《中华人民共和国民事诉讼法》第二十一条',
        notes: '根据被告住所地确定管辖法院，如被告住所地与经常居住地不一致的，由经常居住地人民法院管辖。'
      }
    }

    return {
      plaintiffAddress,
      defendantAddress,
      contractAddress,
      analysisResult,
      canAnalyze,
      analyzeJurisdiction
    }
  }
}
</script>
